import { messages } from "share/common";
import React from "react";
import { Checkbox, Radio, Modal } from "antd";
import SVGIcon from "components/SVGIcon";
import "styles/request-and-expense-settings/expense-standard-modal.scss";
import checkedImg from "images/request-and-expense-settings/reimbursement-standard/checked.png";

class ExpenseStandardModal extends React.Component {
  state = {
    checkedValue: "AMOUNT",
  };

  options = [
    {
      label: (
        <span>
          {messages("expense-8.key441") /*飞机*/}
          <span className="font-disabled">{messages("expense-8.key442") /*（可管控飞机舱等信息）*/}</span>
        </span>
      ),
      value: "PLANE_CABIN",
    },
    {
      label: (
        <span>
          {messages("expense-8.key326") /*火车*/}
          <span className="font-disabled">{messages("expense-8.key443") /*（可管控火车座等信息）*/}</span>
        </span>
      ),
      value: "TRAIN_SEAT_CLASS",
    },
    {
      label: (
        <span>
          {messages("expense-8.key444") /*轮船*/}
          <span className="font-disabled">{messages("expense-8.key445") /*（可管控轮船座次信息）*/}</span>
        </span>
      ),
      value: "SHIP_CABIN",
    },
  ];

  isNonAmount = () => ["PLANE_CABIN", "TRAIN_SEAT_CLASS", "SHIP_CABIN"].includes(this.state.checkedValue);

  onChange = (e) => {
    this.setState({ checkedValue: e.target.value });
  };

  render() {
    const { checkedValue } = this.state;
    const { visible, onOk, close } = this.props;
    return (
      <Modal
        title={messages("expense-8.key446") /*新建费用标准*/}
        visible={visible}
        onOk={() => onOk(checkedValue)}
        onCancel={close}
      >
        <div className="expense-standard-modal">
          <div
            className={this.classNames({
              "expense-standard-modal-item": true,
              active: this.isNonAmount(),
            })}
            onClick={() => this.setState({ checkedValue: !this.isNonAmount() ? "PLANE_CABIN" : checkedValue })}
          >
            <img src={checkedImg} className="checked-icon" />
            <div className="expense-standard-modal-icon-box">
              <SVGIcon type="huoche" />
            </div>
            <div className="expense-standard-modal-item-box">
              <div className="expense-standard-modal-item-box-title">
                {messages("expense-8.key447") /*飞机、火车、轮船管控*/}
              </div>
              <Radio.Group value={checkedValue} options={this.options} onChange={this.onChange} />
            </div>
          </div>

          <div
            className={this.classNames({
              "expense-standard-modal-item": true,
              active: checkedValue === "AMOUNT",
            })}
            onClick={() => this.setState({ checkedValue: "AMOUNT" })}
          >
            <img src={checkedImg} className="checked-icon" />
            <div className="expense-standard-modal-icon-box">
              <SVGIcon type="qitaguankong" />
            </div>
            <div className="expense-standard-modal-item-box">
              <div className="expense-standard-modal-item-box-title">{messages("expense-8.key448") /*其他管控*/}</div>
              <p>{messages("expense-8.key449") /*按照“费用金额”管控，如：酒店费、交通费等*/}</p>
              <p>{messages("expense-8.key450") /*按照费用字段进行管控，如招待人数需为陪同人数的3倍等*/}</p>
            </div>
          </div>
        </div>
      </Modal>
    );
  }
}

export default ExpenseStandardModal;
